<template>
  <div class="app-container">
    <tit></tit>
    <div class="dis-flex mb-30">
      <el-row :gutter="20" class="flex-1">
        <el-col :span="3">
          <el-input v-model="code" placeholder="分类编号" class="mr-10"></el-input>
        </el-col>
        <el-col :span="3">
          <el-input v-model="name" placeholder="分类名称" class="mr-10"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="success" class="theme-bg-color theme-bd-color" @click="getCatalogPage(page)">查询</el-button>
        </el-col>
      </el-row>
      <el-button type="primary" class="theme-bg-color theme-bd-color" @click="addCourseCatalog">
        <i class="el-icon-plus el-icon--right mr-10"></i>添加分类</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
        <el-table-column label="分类编号">
          <template slot-scope="scope">
            {{scope.row.number}}
          </template>
        </el-table-column>
        <el-table-column label="分类名称">
          <template slot-scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{scope.row.createDate}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.name,scope.row.id)" type="text" size="small" class="preview el-button--text-preview">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
        layout="prev, pager, next,sizes,jumper" :total="total" background>
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import tit from '@/components/Htitle'
  export default {
    methods: {

    },
    components: {
      tit
    },
    data() {
      return {
        code: '',//课程编号
        page: 1,
        tableData: null,
        total: null,
        pageSize: 10,
        name: '', //课程名称
        loading: false
      }
    },
    created() {
      this.getCatalogPage(1)
    },
    methods: {
      getCatalogPage(page = 1, pageSize) {
        let self = this
        if (self.loading) {
          return this.$message({
            message: '正在查询中,请勿重复点击查询',
            type: 'error'
          })
        }
        console.log(self.page)
        let data = {
          code: self.code,
          name: self.name,
          page: page || self.page,
          pageSize: pageSize || self.pageSize
        }
        self.loading = true
        this.$store.dispatch('queryCourseCatalogPage', data).then(res => {
          self.loading = false
          if (res.success) {
            self.total = res.pageInfo.total
            self.page = res.pageInfo.page
            self.pageSize = res.pageInfo.pageSize
            self.tableData = res.pageInfo.list
          } else {
            this.$message({
              type: 'error',
              message: res.message
            });
          }
        })
      },
      addCourseCatalog() {
        this.$prompt('', '分类名称', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$store.dispatch('createCourseCatalog', { name: value }).then(res => {
            if (!res.success) {
              this.$message({
                type: 'error',
                message: res.message
              });
            } else {
              this.$message({
                type: 'success',
                message: '添加成功'
              });
              this.getCatalogPage(1)
            }
          })
        }).catch((res) => {

        });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        let self = this;
        self.tableData = null;
        self.getCatalogPage(1, val)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        let self = this;
        self.tableData = null;
        self.getCatalogPage(val)
      },
      currentPage(val) {
        console.log(val, 99999999)
      },
      handleClick(val, id) {
        this.$prompt('', '修改分类名称', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue:val
        }).then(({ value }) => {
          this.$store.dispatch('modifyCourseCatalog', { id: id, name: value }).then(res => {
            if (!res.success) {
              this.$message({
                type: 'error',
                message: res.message
              });
            } else {
              this.$message({
                type: 'success',
                message: '修改成功'
              });
              this.getCatalogPage(1)
            }
          })
        }).catch((res) => {

        });
      }
    }
  }
</script>
<style scoped lang="scss">
  .line {
    text-align: center;
  }

  .table {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 26px;
    background-color: #ffffff;
  }

  .table:after {
    content: '';
    width: 0;
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
  }
</style>